<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>驾校详情(进行中)</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
		<style>
			.mui-content{font-size: 16px;}				
			/*详情*/
			.Offer h5{color: black;font-size: 16px;}
			.Offer b{color: red;margin-right: 15px;}
			/*图片*/
			.mui-content{font-size: 16px;}
			.mui-table-view-cell>a:not(.mui-btn){white-space:normal}
			.mui-table-view .mui-media-object {line-height: 47px;max-width: 95px;height: 70px;}
			.mui-media-body b{color: black;font-size: 16px;padding: 5px 0;display: block;}					
			/*底部*/
			.mui-bar{line-height: 50px;padding: 0 6px;}			
			.mui-table-view {padding: 5px 0;}			
			.details{color: #AAAAAA;}
			.details li{width: 95%;}
			.total{line-height: 50px;border-top: 1px solid #efeff4;text-align: right;display: none;}
			.total button{width: 80px;line-height: 15px;overflow: hidden;padding: 10px 12px 7px!important;}
			.total span:nth-child(2){display: inline-block;float: right;}

			.Surroundings{background: white;padding: 11px 15px;}			
			.mui-slider-group img{width: 100px;height: 100px;}
			/*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 
											  									  		
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">详情</h1>
			<a href="#picture" class="mui-pull-right mui-icon">
		    	<i class="iconfont Siez1">&#xe612;</i>
		    </a>
		</header>
		
		<nav class="mui-bar mui-bar-tab">
			<div class="mui-col-xs-5 mui-pull-left">
				<span>合计：￥<map class="order_amount">2500.00</map></span>							
			</div>
			<!--待付款-->
			<div class="mui-col-xs-7 total mui-pull-right">
				<div>
					<button type="button" class="mui-btn Success order_cancel">取消订单</button>
					<button type="button" class="mui-btn Payment RGB payment">付款</button>
				</div>	
			</div>
			<!--进行中-->
			<div class="mui-col-xs-7 total mui-pull-right">
				<div>
					<button type="button" class="mui-btn Success order_cancel">取消订单</button>
					<button type="button" class="mui-btn Payment RGB order_complete">完成订单</button>
				</div>	
			</div>
			<!--已完成-->
			<div class="mui-col-xs-3 total mui-pull-right">
				<b class="gray">已完成</b>
			</div>
			<!--已取消-->
			<div class="mui-col-xs-3 total mui-pull-right">
				<b class="gray">已取消</b>
			</div>
		</nav>
		<div class="mui-content">		
			<div class="School">					
				<ul class="mui-table-view Driving">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../public/img/21.jpg">
							<div class="mui-media-body">
								<b></b>
								<p></p>
								<p class="mui-h6"></p>
							</div>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view Offer">
					<li class="mui-table-view-cell">
						<h5>深圳标准班</h5>
						<p class="school_type"></p>
						<p class="price"><b></b><s></s></p>
					</li>
				</ul>
				<ul class="mui-table-view m5">
					<li class="mui-table-view-cell">教学环境</li>
				</ul>
				<div class="mui-slider-group Surroundings">					
					<div class="succes-goods-img-body table-view-cell mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"style="height: 100px;">
						<div class="mui-route mui-scroll mobile">
							<!--<img src="../public/img/23.jpg" data-preview-src="" data-preview-group="1"/>
							<img src="../public/img/24.jpg" data-preview-src="" data-preview-group="1"/>
							<img src="../public/img/25.jpg" data-preview-src="" data-preview-group="1"/>
							<img src="../public/img/22.jpg" data-preview-src="" data-preview-group="1"/>
							<img src="../public/img/26.jpg" data-preview-src="" data-preview-group="1"/>
							<img src="../public/img/21.jpg" data-preview-src="" data-preview-group="1"/>-->
						</div>
					</div>	
				</div>
				<ul class="mui-table-view m5">
					<li class="mui-table-view-cell">驾校简介</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell detail">
						<p></p>
					</li>
				</ul>
			</div>		
		</div>
		<!--/*支付密码弹窗 start*/-->
			<div class="password-of-pay-wraper" id="j_password_of_pay">
				<div class="password-of-pay-top">
					<p>请输入支付密码</p>
					<div class="close-btn" id="j_close_tn">X</div>
				</div>
				<div class="password-of-pay-body">
					<form action="#" class="mui-clearfix">
						<input type="password" id="pwd1" maxlength="1" />
						<input type="password" id="pwd2" maxlength="1" />
						<input type="password" id="pwd3" maxlength="1" />
						<input type="password" id="pwd4" maxlength="1" />
						<input type="password" id="pwd5" maxlength="1" />
						<input type="password" id="pwd6" maxlength="1" />
					</form>		
				</div>
			</div>
			<div id="password_backdrop"></div>
		<!--分享-->
		<div id="picture" class="brand-share mui-popover mui-popover-action mui-popover-bottom" style="height: 100px;">
			<ul class="background table-view">
				<li><i class="iconfont lvs weixin">&#xe609;</i>
					<span>微信</span>
				</li>
				<li><i class="iconfont ify4 qq">&#xe658;</i>
					<span>QQ好友</span>
				</li>
				<li><i class="iconfont lvs friends">&#xe65f;</i>
					<span>朋友圈</span>
				</li>
				<li><i class="iconfont ify3 micro-blog">&#xe661;</i>
					<span>微博</span>
				</li>
			</ul>			
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script src="../js/appconfig.js"></script>
		<script type="text/javascript" src="../js/web_js/public.js"></script>
		<script type="text/javascript" src="../js/web_js/driving_off.js"></script>
		<script type="text/javascript" src="../js/web_js/order_pay.js"></script>
		<script type="text/javascript" src="../js/web_js/share.js" ></script>
		<script>
			$("#j_close_tn").on("tap",function (){
				$("#j_password_of_pay").hide();
				tool.shade().hide();
				$('.popover').fadeOut();
				$('#password_backdrop').css("display","none");
			});
		</script>
	</body>
</html>